<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      rel="stylesheet"
      type="text/css"
      href="./Cesium/Widgets/widgets.css"
    />
    <script type="text/javascript" src="./cesium/Cesium.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="cesiumcontainer" style="width: 100vw; height: 100vh"></div>

    <script>
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZTgxOGNhZC03NThmLTQ0NzMtOTNlYS1kNmM3YzlmZDU3NTMiLCJpZCI6MTI1NTY3LCJpYXQiOjE2NzY5MDI0MzJ9.ulIEz3NCh2cMEBiHrqIuv9I6icn5KTMMnBdy2wassoM";

      var viewer = new Cesium.Viewer("cesiumcontainer", {
        // 生成地形
        terrainProvider: Cesium.createWorldTerrain(),
      });

      // 加载倾斜示范数据
      var palaceTileset = new Cesium.Cesium3DTileset({
        url: "./3dtiles/W20229-MWBRWPS-M-B-000/W20229-MWBRWPS-M-B-000/tileset.json",
      });
      palaceTileset.readyPromise.then(function (palaceTileset) {
        viewer.scene.primitives.add(palaceTileset);
        // 控制模型的位置
        update3dtilesMaxtrix(palaceTileset, {
          tx: 114.1314395, // 模型中心X轴坐标（经度，单位：十进制度）
          ty: 22.5404925, // 模型中心Y轴坐标（纬度，单位：十进制度）
          tz: 0, // 模型中心Z轴坐标（高程，单位：米）
          rx: 0, // X轴（经度）方向旋转角度（单位：度）
          ry: 0, // Y轴（纬度）方向旋转角度（单位：度）
          rz: 182.5, // Z轴（高程）方向旋转角度（单位：度）
          scale: 1, // 缩放比例
        });

        // 定位到三维模型
        viewer.zoomTo(palaceTileset);
      });

      // 控制模型的位置
      function update3dtilesMaxtrix(tileset, position_params) {
        // 旋转
        var mx = Cesium.Matrix3.fromRotationX(
          Cesium.Math.toRadians(position_params.rx)
        );
        var my = Cesium.Matrix3.fromRotationY(
          Cesium.Math.toRadians(position_params.ry)
        );
        var mz = Cesium.Matrix3.fromRotationZ(
          Cesium.Math.toRadians(position_params.rz)
        );
        var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
        var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
        var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
        // 缩放
        var scale = Cesium.Matrix4.fromUniformScale(position_params.scale);
        // 平移
        var position = Cesium.Cartesian3.fromDegrees(
          position_params.tx,
          position_params.ty,
          position_params.tz
        );
        var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        // 旋转、平移、缩放矩阵相乘
        Cesium.Matrix4.multiply(m, scale, m);
        Cesium.Matrix4.multiply(m, rotationX, m);
        Cesium.Matrix4.multiply(m, rotationY, m);
        Cesium.Matrix4.multiply(m, rotationZ, m);
        // 赋值给tileset
        tileset._root.transform = m;
      }

      function update3dtilesMaxtrix(tileset, position_params) {
        var cartographic = Cesium.Cartographic.fromCartesian(
          tileset.boundingSphere.center
        );
        var surface = Cesium.Cartesian3.fromDegrees(
          Cesium.Math.toDegrees(cartographic.longitude),
          Cesium.Math.toDegrees(cartographic.latitude),
          cartographic.height
        );
        var offset = Cesium.Cartesian3.fromDegrees(
          position_params.tx,
          position_params.ty,
          position_params.tz
        );
        var translation = Cesium.Cartesian3.subtract(
          offset,
          surface,
          new Cesium.Cartesian3()
        );
        // 赋值给tileset
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
      }

      var temp;

      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction(function (movement) {
        // 在这里处理单击事件
        var pickedObject = viewer.scene.pick(movement.position);
        console.log("pickedObject:", pickedObject);
        if (temp) temp.detail.model.color = undefined;
        pickedObject.detail.model.color = Cesium.Color.RED; // 改变颜色
        temp = pickedObject;
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    </script>
  </body>
</html>
